<template>
  <div class="curr-page">
    <div v-if="article_list.length == 0">
      <el-empty description="暂无帖子"></el-empty>
    </div>
    <div v-else v-for="(item, index) in article_list" :key="index">
      <el-descriptions
        class="mt-3"
        :title="'帖子：' + item.title"
        :column="3"
        size="medium"
      >
        <template #extra>
          <span class="el-icon-edit mr-3">编辑</span>
          <span class="el-icon-delete">删除</span>
        </template>
        <el-descriptions-item label="标签" span="3">
          <!-- tags -->
          <el-tag
            :key="tag"
            v-for="tag in item.tags"
            :disable-transitions="false"
            tag="info"
            size="mini"
            class="mr-2"
          >
            {{ tag }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="摘要" span="3">
          <el-alert
            :title="item.desc"
            type="info"
            class="mt-2"
            :closable="false"
          >
          </el-alert>
        </el-descriptions-item>
        <el-descriptions-item label="正文" span="3">
          <div v-html="item.content"></div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article_list: [],
    };
  },

  methods: {
    fetchInitData() {
      this.fetchUserShop();
    },

    async fetchUserShop() {
      await this.$axios
        .get(`/discussion/user/${sessionStorage.userId}`)
        .then((res) => {
          this.article_list = res.data;
        });
    },
  },

  created() {
    this.fetchInitData();
  },
};
</script>

<style lang="scss" scoped>
.curr-page {
  margin: 0px;
  padding: 0px;
}
</style>
